import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { AtSearchBar, AtList, AtListItem } from 'taro-ui'

import searchApi from '@api/search'
import searchIcon from '@assets/images/search.png'

import Result from './result'
import './index.scss'

class Search extends Component {
  constructor(props) {
    super(props)
    this.state = {
      keywords: '', // 搜索关键词
      hotList: [], // 热搜列表
      suggestList: [], // 搜索建议
      showResult: false, // 显示搜索结果
      showHot: true, // 显示热搜列表
      showSuggest: false // 显示搜索建议
    }
  }

  config = {
    navigationBarTitleText: '搜索',
    enablePullDownRefresh: false,
  }
  
  // 建议
  onChange (value) {
    if (value.length) {
      searchApi.searchSuggest(value).then(res => {
        this.setState({
          suggestList: res.result.allMatch
        })
      })
      // 有值不显示热搜榜
      this.setState({
        showHot: false,
        showSuggest: true,
        showResult: false
      })
    } else {
      // 没值显示热搜榜
      this.setState({
        showHot: true,
        showSuggest: false,
        showResult: false
      })
    }
    this.setState({
      keywords: value
    })
  }

  // 取消
  onActionClick () {
    this.setState({
      keywords: '',
      showResult: false,
      showHot: true,
      showSuggest: false
    })
    Taro.switchTab({
      url: '/pages/index/index'
    })
  }

  // 清除搜索内容
  handleClear () {
    this.setState({
      keywords: '',
      showResult: false,
      showHot: true,
      showSuggest: false
    })
  }

  // 搜索结果
  handleSearchClick (value) {
    this.setState({
      showResult: true,
      showHot: false,
      showSuggest: false,
      keywords: value
    })
  }
  

  componentDidMount () {
    searchApi.searchHotList().then(res => {
      this.setState({
        hotList: res.data
      })
    })
  }

  render() { 
    return (
      <View className='search'>
        {/* 搜索框 */}
        <AtSearchBar
          actionName='取消'
          placeholder='请输入歌手或歌手名'
          value={this.state.keywords}
          fixed
          focus
          onClear={this.handleClear.bind(this)}
          onChange={this.onChange.bind(this)}
          onActionClick={this.onActionClick.bind(this)}
        />
        <View className='search-list' style={{display: this.state.showHot ? 'block': 'none'}}>
          <Text class='hot-title'>热搜榜</Text>
          {
            this.state.hotList.map((item, index) => {
              return (
                <View
                  className='at-row at-row__align--center'
                  key={item + index}
                  onClick={this.handleSearchClick.bind(this, item.searchWord)}
                >
                  <View className='at-col at-col-1 at-col--auto' style={{color: index < 3 ? '#DC4238': '#666'}}>
                    {index + 1 }
                  </View>
                  <View className='at-col'>
                    <View style='margin-bottom: 5px'>
                      <Text className='song-title'>{item.searchWord}</Text>
                      <Text className='song-num'>{item.score}</Text>
                      <Image
                        src={item.iconUrl}
                        className='song-icon'
                        style={{
                          display: item.iconUrl ? 'inline-block' : 'none',
                          width: item.iconType === 1 ? '81rpx' : '36rpx',
                          height: '42rpx'
                        }}
                      />
                    </View>
                    <View>
                      <Text className='song-text' style={{display: item.content ? 'block': 'none'}}>{item.content}</Text>
                    </View>
                  </View>
                </View>
              )
            })
          }
        </View>
        <View className='search-suggest' style={{display: this.state.showSuggest ? 'block': 'none'}}>
          <Text class='suggest-title'>搜索“{this.state.keywords}”</Text>
          <AtList>
            {
              this.state.suggestList.map((item, index) => {
                return (
                  <AtListItem
                    key={item + index}
                    title={item.keyword}
                    onClick={this.handleSearchClick.bind(this, item.keyword)}
                    thumb={searchIcon}
                  />
                )
              })
            }
          </AtList>
        </View>
        <Result isShow={this.state.showResult} keywords={this.state.keywords} />
      </View>
    )
  }
}

export default Search